
/* ########################################################## */
/* ###################### NORMAL STATE ###################### */
/* ########################################################## */

gs-combo > .root {
    padding-right: 1.6em;
}

gs-combo .drop_down_button {
    position: absolute;
    top: 0;
    right: 0;
    width: 1.6em;
    
    margin-top: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    height: 100% !important;
    min-height: 0;
    
    /*
    padding-top: 0.2em;
    text-align: center;
    */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
/*
gs-combo .drop_down_button:after {
    font-family: fontawesome;
    content: '\f107';
}*/

/* ########################################################## */
/* ####################### MINI STATE ####################### */
/* ########################################################## */

gs-combo[mini] {
    padding: 0;
    border: 0;
    box-shadow: 0 0 0 0 #FFFFFF;
    border-radius: 0;
}

gs-combo[mini] > .root {
    padding-right: 1.2em;
}

gs-combo[mini] .drop_down_button {
    width: 1.2em;
    height: 1.6em;
    right: 0.2em;
    min-height: 0;
}

gs-combo[mini] input {
    padding: 0;
    border: 0;
}


/* ########################################################## */
/* ##################### READONLY STATE ##################### */
/* ########################################################## */

gs-combo[readonly] {
    box-shadow: 0 0 0 0 #000 inset;
    opacity: 0.9;
    border-color: #E6E6E6;
    cursor: default;
}

gs-combo[readonly] > .root {
    padding-right: 0;
}

gs-combo[readonly] .drop_down_button {
    display: none;
    cursor: default;
    opacity: 0.9;
    pointer-events: none;
}


/* ######################################################### */
/* ###################### ERROR STATE ###################### */
/* ######################################################### */

gs-combo.error .drop_down_button {
    color: #FFFF00;
    background: #FF0000;
}
/*
gs-combo.error .drop_down_button:after {
    content: '\f071';
}
*/

/* ########################################################## */
/* ###################### OPENED STATE ###################### */
/* ########################################################## */

/*gs-combo.open {
    position: fixed;
    z-index: 101;
}*/

gs-combo.open .drop_down_button {
    background: #FAFFA9;
}


/* ######################################################### */
/* ####################### DROP DOWN ####################### */
/* ######################################################### */

/* the dropdown appears outside of the combo element, hence the long class names */

.gs-combo-dropdown-container > .gs-combo-positioning-container {
    position: fixed;
    z-index: 101; /* this z-index is arbituary, we need a system that makes sense for choosing z-indexes */
}

.gs-combo-dropdown-container .gs-combo-scroll-container {
    width: 100%;
    height: 100%;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    background-color: #FFFFFF;
    border: 1px solid #AEAEAE;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.gs-combo-dropdown-container.above .gs-combo-positioning-container {
    box-shadow: 0 -3px 0.2em 0.1em #C5C5C5;
}

.gs-combo-dropdown-container.below .gs-combo-positioning-container {
    box-shadow: 0 3px 0.2em 0.1em #C5C5C5;
}

/* ########################################################## */
/* ################# DROP DOWN TABLE REFLOW ################# */
/* ########################################################## */

.gs-combo-dropdown-container .reflow td,
.gs-combo-dropdown-container .reflow th,
.gs-combo-dropdown-container .reflow tbody th,
.gs-combo-dropdown-container .reflow tbody td,
.gs-combo-dropdown-container .reflow thead td,
.gs-combo-dropdown-container .reflow thead th {
    width: 100%;
    float: left;
    clear: left;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}


.gs-combo-dropdown-container .reflow thead td,
.gs-combo-dropdown-container .reflow thead th {
    display: none;
}


/*
.gs-combo-dropdown-container .reflow thead th,
.gs-combo-dropdown-container .reflow thead td {
    height: auto;
    min-height: 3em;
}

*/

.gs-combo-dropdown-container .reflow tbody th,
.gs-combo-dropdown-container .reflow tbody td {
    height: auto;
    min-height: 3em;
}

.gs-combo-dropdown-container .reflow tbody th {
    padding-top: 1.3em;
    text-align: center;
    font-size: 1.5em;
}

.gs-combo-dropdown-container .reflow tbody tr td:first-child {
    margin-top: 2em;
}

.gs-combo-dropdown-container .reflow tbody td {
    padding: 0;
}

.gs-combo-dropdown-container .reflow .cell-label {
    padding: 0.3em;
    width: 100%;
    display: inline-block;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.gs-combo-dropdown-container .reflow .cell-label:after {
    content: attr(data-text);
}

#table_wrapper.reflow table tbody tr {
    border-top: 2px solid #AAAAAA;
    border-bottom: 2px solid #AAAAAA;
}

#table_wrapper.reflow .cell-label {
    width: 100%;
    margin: 0;
    margin-top: 0.4em;
    border: 0 none;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}